{% extends 'base.html' %}
{% load static %}
{% block carousel %}
    <!-- Carousel
    ================================================== -->
    <div class="container">
        <div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top: 80px">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="{% static 'img/img_1.png' %}" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
{#              <h1>Example headline.</h1>#}
{#              <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>#}
{#              <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>#}
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="{% static 'img/img_2.png' %}" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">

            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="{% static 'img/img_3.png' %}" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">

            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- /.carousel -->
    </div>
{% endblock %}

    <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->
{% block content %}
    <div class="container marketing">
        <h4>阅读最多：</h4>
        <hr class="featurette-divider">
      <!-- Three columns of text below the carousel -->
      <div class="row">
          {% for note in readed_notes %}
        <div class="col-lg-4">
          <img class="img-thumbnail" src="{{ imgs|random }}" alt="Generic placeholder image" style="height: 150px">
          <h2 style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">{{ note.title }}</h2>
            <br>
          <p><a class="btn btn-default" href="{% url 'note_detail' note.id %}" role="button">查看详情 &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        {% endfor %}
      </div><!-- /.row -->


      <!-- START THE FEATURETTES -->
        <br>
        <h4>点赞最多：</h4>

      <hr class="featurette-divider">
       {% for like_note in like_notes %}
           {% if forloop.counter == 2 %}
           <div class="row featurette">
               <div class="col-md-5">
                   <img class="featurette-image img-responsive center-block" src="{{ imgs|random}}" alt="Generic placeholder image">
               </div>
               <div class="col-md-7">
                    <h2 class="featurette-heading" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">{{ like_note.title }} </h2>
                    <p class="lead">{{ like_note.content |truncatechars_html:150 |safe}}</p>
                </div>
            </div>
               {% else %}
               <div class="row featurette">
                   <div class="col-md-7">
                       <h2 class="featurette-heading" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">{{ like_note.title }} </h2>
                       <p class="lead">{{ like_note.content |truncatechars_html:150 |safe}}</p>
                   </div>
                   <div class="col-md-5">
                       <img class="featurette-image img-responsive center-block" src="{{ imgs|random}}" alt="Generic placeholder image">
                   </div>
               </div>
           {% endif %}
      <hr class="featurette-divider">
        {% endfor %}
      <!-- /END THE FEATURETTES -->




    </div><!-- /.container -->

{% endblock %}